<template>
 <a-button :ghost="ghost" :type="type" :size="size" @click="handleClick" v-if="hasAuth" :loading="loading" :disabled="disabled">
    <slot>primary</slot>
  </a-button>
  <a-tooltip v-else>
    <template slot="title">
      <span>{{ $t('noSuchPermission') }}</span>
    </template>
    <!-- 操作列按钮和其它按钮判断 -->
    <a-button v-if="ghost===true" :size="size" :type="type" :disabled="true" size="small">
      <slot>primary</slot>
    </a-button>
    <a-button v-if="ghost===false" :size="size" :type="type" :disabled="true" class="disabledAuthButtonWrap">
      <slot>primary</slot>
    </a-button>
  </a-tooltip>
</template>
<script>
export default {
  props: {
    ghost: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'primary'
    },
    size: {
      type: String,
      default: 'default'
    },
    // 按钮的权限key
    auth: {
      type: [String, Array],
      default: ''
    },
    loading: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    hasAuth () {
      // auth没有值的情况下，说明无需要权限验证；有值则需要验证是否拥有此权限
      let { auth } = this
      if (typeof this.auth === 'string') {
        auth = [this.auth]
      }
      return !this.auth || this.$hasPermission(auth)
    }
  },
  data () {
    return {
    }
  },
  methods: {
    handleClick () {
      if (!this.hasAuth) {
        return
      }
      this.$emit('click')
    }
  }
}
</script>
<style scoped lang="less">
.disabledAuthButtonWrap {
  margin-right: 8px;
  display: block;
  button{
    margin-right: 0px;
  }
}
</style>
